Transformace

Transformace je možné ve WPF aplikovat na elementy odvozené od třídy UIElement. Mezi takové elementy patří například: Button, TextBox, Rectangle, Path a další. Všechny tyto elementy mají atribut RenderTransform pro nastavení transformace.

Obrázek 9 Diagram tříd pro transformace [zdroj: vlastní]

Na Obrázku 9 je zobrazen diagram tříd pro transformace. Ve WPF jsou předefinovány čtyři transformace: změna měřítka (ScaleTransform), posunutí (TranslateTransform), rotace (RotateTransform) a zkosení (SkewTransform). Na Obrázku 9 je také element MatrixTransform . Tento element umožňuje vytvoření vlastní transformace. Také je možné pomocí elementu TransformGroup použít více transformací najednou. Stačí elementy transformací umístit jako přímý obsah tohoto elementu.

TranslateTransform (posunutí elementu)

<Rectangle>
   <Rectangle.RenderTransform>

      <TranslateTransform X="0" Y="0" />
                       
    </Rectangle.RenderTransform>
</Rectangle>

Rectangle – posunovaný objekt
RenderTransform – atribut (element vlastnosti) pro nastavení transformace
TranslateTransform – přesune celý objekt po osách x a y z výchozího místa
X – posunutí o X na ose x (může být i záporné)
Y – posunutí o Y na ose y (může být i záporné)
Nezáleží na tom, kde se posunovaný objekt právě nachází. Vždy bude výchozí hodnota pro X a Y rovna 0. V ukázce není objekt vůbec posunut. Nachází se ve výchozí pozici. Na Obrázku 10 je obdélník posunut o -50 bodů na ose x.

Obrázek 10 Ukázka z aplikace TranslateTransform [zdroj: vlastní]

Ukázkové řešení: 2D Grafika/TranslateTransform

ScaleTransform (změna měřítka elementu)

<ScaleTransform ScaleX="1" 
                ScaleY="1"
                CenterX="0"
                CenterY="0"/>

ScaleTransform – změní měřítko elementu, aplikuje se i na atribut StrokeThickness
ScaleX – změní měřítko pro osu X
ScaleY – změní měřítko pro osu Y
Center(X,Y) – bod, ke kterému bude směřovat změna měřítka (element se zmenší nebo zvětší směrem k tomuto bodu)
V ukázce jsou nastaveny výchozí hodnoty pro ScaleTransform. Měřítko zůstává nezměněné. Na Obrázku 11 je nastaveno měřítko na dvojnásobek (ScaleX=2 a ScaleY=2) výchozí hodnoty. S bodem Center nastaveným na střed původního obdélníku. Výchozí pozice bodu Center se nachází v levém horním rohu elementu [0,0].

Obrázek 11 Ukázka z aplikace ScaleTransform [zdroj: vlastní]

Ukázkové řešení: 2D Grafika/ScaleTransform

RotateTransform (rotace elementu)

<RotateTransform Angle="45" 
                 CenterX="0"
                 CenterY="0"/>

RotateTransform – rotace elementu se zadaným úhlem a středem rotace Center
Angle – nastaví úhel rotace (ve směru hodinových ručiček)
Na Obrázku 12 je ukázka z aplikace RotateTransform.

Obrázek 12 Ukázka z aplikace RotateTransform [zdroj: vlastní]

Ukázkové řešení: 2D Grafika/RotateTransform

SkewTransform (zkosení elementu)

<SkewTransform AngleX="25" 
               AngleY="45"
               CenterX="0"
               CenterY="0"/>

SkewTransform – zkosí hrany elementu
AngleX – úhel zkosení pro osu x
AngleY – úhel zkosení pro osu y
Na Obrázku 14 jsou nastaveny hodnoty z ukázky kódu.

Obrázek 13 Ukázka z aplikace SkewTransform [zdroj: vlastní]

Ukázkové řešení: 2D Grafika/SkewTransform